<template>
  <div v-loading="loading" class="business-info-edit app-main-content-box">
    <app-main-title title="商户资料管理" />
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="LOGO：" prop="logoUrl">
        <el-upload
          class="app-uploader-img-plus fl"
          :action="actionUrl"
          :show-file-list="false"
          :headers="uploadHeaders"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="form.logoUrl" :src="fileBaseUrl+form.logoUrl" class="avatar">
          <i v-else class="el-icon-plus app-uploader-img-plus-icon" />
        </el-upload>
        <ul class="fl upload_tips">
          <li>图片要求：</li>
          <li>1.上传的图片限制文件大小不超过500k，仅支持JPG/PNG格式</li>
          <li>2.像素大小控制在300像素*300像素以下</li>
          <li>
            <el-button size="small" round @click="openCardImgMap ">从系统图库中选择</el-button>
          </li>
        </ul>
      </el-form-item>
      <el-form-item label="名称：">{{ form.fullName }}</el-form-item>
      <el-form-item label="简称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入简称" />
      </el-form-item>
      <el-form-item label="联系人：" prop="principal">
        <el-input v-model="form.principal" placeholder="请输入联系人" :disabled="form_disabled" />
      </el-form-item>
      <el-form-item label="联系电话：">{{ form.mobilePhone }}</el-form-item>
      <el-form-item label="联系邮箱：" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" />
      </el-form-item>
      <el-form-item label="地址：" prop="address">
        <el-input
          v-model="form.address"
          type="textarea"
          :autosize="{ minRows: 2}"
          placeholder="请输入地址"
        />
      </el-form-item>
      <el-form-item>
        <el-button size="medium" round type="primary" @click="onSubmit">提交</el-button>
        <el-button size="medium" round @click="routerBack()">取消</el-button>
      </el-form-item>
    </el-form>

    <!-- 图库 -->
    <card-img-map ref="cardImgMap" img-type="LOGO" />
  </div>
</template>

<script>
import { imgUploadUrl } from '@/api/upload'
import { mapGetters } from 'vuex'
import { validateStrLen, validateEMail } from '@/utils/validate.js'
import { getBusinessInfo, updateBusiness } from '@/api/business'

export default {
  data() {
    /**
       * 表单校验方法相关
       */
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入简称'))
      } else if (!validateStrLen(value, 24)) {
        callback(new Error('长度不超过12个汉字或24个字符'))
      } else {
        callback()
      }
    }
    const validatePrincipal = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系人'))
      } else if (!validateStrLen(value, 30)) {
        callback(new Error('长度不超过15个汉字或30个字符'))
      } else {
        callback()
      }
    }
    const validateEmail = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入联系邮箱'))
      } else if (!validateEMail(value)) {
        callback(new Error('请输入正确邮箱号'))
      } else {
        callback()
      }
    }
    const validateAddress = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入地址'))
      } else if (!validateStrLen(value, 200)) {
        callback(new Error('长度不超过100个汉字或200个字符'))
      } else {
        callback()
      }
    }
    return {
      /**
         * 表单校验字段相关
         */
      rules: {
        logoUrl: [
          {
            required: true,
            message: '请上传商户LOGO图',
            trigger: ['change']
          }
        ],
        name: [
          {
            required: true,
            validator: validateName,
            trigger: ['blur', 'change']
          }
        ],
        principal: [
          {
            required: true,
            validator: validatePrincipal,
            trigger: ['blur', 'change']
          }
        ],
        email: [
          {
            required: true,
            validator: validateEmail,
            trigger: ['blur', 'change']
          }
        ],
        address: [
          {
            required: true,
            validator: validateAddress,
            trigger: ['blur', 'change']
          }
        ]
      },
      // 配置
      actionUrl: imgUploadUrl,
      uploadHeaders: {},
      // 状态
      loading: false,
      // 数据
      imageUrl: '',
      form: {
        name: '',
        principal: '',
        email: '',
        address: ''
      },

      form_disabled: false
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl', 'userInfo'])
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取商户信息
    fetchData() {
      // 设置修改权限
      const syncTmpMerchantId = this.userInfo.business.syncTmpMerchantId
      if (syncTmpMerchantId) {
			  this.form_disabled = true
      } else {
			  this.form_disabled = false
      }

      getBusinessInfo().then(res => {
        this.form = res.data
      })
    },

    /**
       * 按钮组
       */
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.form.logoUrl = res.data.path
    },

    // 上传预处理
    beforeAvatarUpload(file) {
      return this.beforeUploadImg(file, this, 300, 300, 0.5)
    },

    // 提交
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true
          updateBusiness(this.form).then(res => {
            if (res.code === 0) {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000,
                offset: 40
              })
              this.loading = false
              this.$router.push({ name: 'BusinessInfo' })
            } else {
              this.loading = false
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    // 取消
    routerBack() {
      this.$router.push({ name: 'BusinessInfo' })
    },

    // 打开图库
    openCardImgMap() {
      this.$refs.cardImgMap.open().then(res => {
        this.form.logoUrl = res
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .business-info-edit {
    .el-input,
    .el-textarea {
      width: 70%;
      max-width: 600px;
    }
    .app-uploader-img-plus {
      width: 180px;
      height: 180px;
      .app-uploader-img-plus-icon {
        font-size: 36px;
        color: #8c939d;
        width: 180px;
        height: 180px;
        line-height: 180px;
        text-align: center;
      }
      .avatar {
        width: 180px;
        height: 180px;
        display: block;
      }
    }
    .upload_tips {
      margin: 20px 0 0 20px;
      li {
        margin-top: 10px;
        font-size: 14px;
        line-height: 16px;
        color: $dark-font-color;
      }
    }
  }
</style>
